<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-修改支付密码</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="register-bar revamp-bar">
    <h2 class="header-box">
        <a class="go-back-btn sprite-icon" id="forgetGoBack" href="javascript:;"></a>
        设置支付密码
        <span class="has-icon sp"></span>
    </h2>

    <!--手机绑定  修改密码-->
    <div class="binding-phone go-transform active">
        <span class="revamp-tips">请输入135****6787收到的短信验证码</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left">
                        <label>验证码</label>
                        <input class="code-text" placeholder="请输入验证码" value="" type="text" maxlength="4">
                        <span id="phoneCode" class="pos-abs-tr code-link">获取验证码</span>
                    </div>
                </li>
            </ul>
        </div>
        <span class="revamp-tips margin-top">请设置你的钱包支付密码</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>设置密码</label>
                        <input class="pwd" placeholder="请输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>确认密码</label>
                        <input class="againPwd" placeholder="请再次输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
            </ul>
        </div>
        <div class="login-btn active"><a href="javascript:;">确定</a></div>
        <div class="forget-tips" style="text-align: left; text-decoration: underline; display: none;">
            <a href="javascript:;" id="goEmail">通过邮箱设置></a>
        </div>
    </div>

    <!--邮箱绑定修改密码-->
    <div class="binding-email go-transform active">
        <span class="revamp-tips">请输入邮箱135****6787@qq.com收到的验证码</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left">
                        <label>验证码</label>
                        <input class="code-text" placeholder="请输入验证码" value="" type="text" maxlength="4">
                        <span id="emailCode" class="pos-abs-tr code-link">获取验证码</span>
                    </div>
                </li>
            </ul>
        </div>
        <span class="revamp-tips margin-top">请设置你的钱包支付密码</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>设置密码</label>
                        <input class="pwd" placeholder="请输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>确认密码</label>
                        <input class="againPwd" placeholder="请再次输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
            </ul>
        </div>
        <div class="login-btn active"><a href="javascript:;">确定</a></div>
        <div class="forget-tips" style="text-align: left; text-decoration: underline; display: none;">
            <a href="javascript:;" id="goPhone">通过手机设置></a>
        </div>
    </div>

    <!--新绑定手机-->
    <div class="first-binding-phone go-transform">
        <span class="revamp-tips">您输入的手机号码将成为您的绑定手机号</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>手机号码</label>
                        <input id="phone" placeholder="请输入手机号码" value="" type="text" maxlength="11">
                    </div>
                </li>
                <li class="no-padding">
                    <div class="register-input line-black padding-left">
                        <label>验证码</label>
                        <input class="code-text" placeholder="请输入验证码" value="" type="text" maxlength="4">
                        <span id="firstPhoneCode" class="pos-abs-tr code-link">获取验证码</span>
                    </div>
                </li>
            </ul>
        </div>
        <span class="revamp-tips margin-top">请设置你的钱包支付密码</span>

        <div class="register-cont no-margin">
            <ul>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>设置密码</label>
                        <input class="pwd" placeholder="请输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
                <li class="no-padding">
                    <div class="register-input line-black padding-left no-padding">
                        <label>确认密码</label>
                        <input class="againPwd" placeholder="请再次输入密码" value="" type="password" maxlength="20">
                    </div>
                </li>
            </ul>
        </div>
        <div class="login-btn active"><a href="javascript:;">确定</a></div>
        <div class="forget-tips" style="text-align: left; text-decoration: underline; display: none;">
            <a href="javascript:;" id="goBackEmail">返回邮箱设置></a>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        var _phoneBar = $(".binding-phone");
        var _emailBar = $(".binding-email");
        var _firstPhoneBar = $(".first-binding-phone");
        //设置显示内容状态
        //显示的状态，手机，Email
        //只要是手机绑定的就显示手机页面，如果没有绑定邮箱则去掉“通过邮箱设置”按钮。
        var _isPhone = false, _isEmail = true;

        if (_isPhone) {
            if (_isEmail) {
                _phoneBar.addClass("active").show();
                _phoneBar.find(".forget-tips").show();
                _emailBar.removeClass("active").hide();
                _emailBar.find(".forget-tips").hide();
            } else {
                _phoneBar.addClass("active").show();
                _phoneBar.find(".forget-tips").hide();
                _emailBar.removeClass("active").hide();
                _emailBar.find(".forget-tips").hide();
            }
        } else {
            _emailBar.addClass("active").show();
            _emailBar.find(".forget-tips").show();
            _phoneBar.removeClass("active").hide();
            _phoneBar.find(".forget-tips").hide();
        }


        $("#goPhone").click(function () {
            if (_isPhone) {
                _phoneBar.show();
                setTimeout(function(){
                    _phoneBar.addClass("active");
                    _phoneBar.find(".forget-tips").show();
                    _emailBar.removeClass("active");
                },100);
            } else {
                _firstPhoneBar.show();
                _firstPhoneBar.addClass("active");
                _firstPhoneBar.find(".forget-tips").show();
            }
            _emailBar.removeClass("active");
            _emailBar.find("input").val("");
            clearInterval(_this_prop._clearTimer_);
            $("#emailCode").text("获取验证码").removeClass("active").on("click",publicFuns.clickShowTime);
        });

        $("#goEmail").click(function () {
            _emailBar.show();
            setTimeout(function(){
                _emailBar.addClass("active");
                _emailBar.find(".forget-tips").show();
                _phoneBar.removeClass("active");
            },100);
            _phoneBar.find("input").val("");
            clearInterval(_this_prop._clearTimer_);
            $("#phoneCode").text("获取验证码").removeClass("active").on("click",publicFuns.clickShowTime);
        });

        $("#goBackEmail").click(function(){
            _emailBar.addClass("active");
            _emailBar.find(".forget-tips").show();
            _firstPhoneBar.removeClass("active");
            _firstPhoneBar.find("input").val("");
            clearInterval(_this_prop._clearTimer_);
            $("#firstPhoneCode").text("获取验证码").removeClass("active");
        });

        $("#phoneCode").on("click", publicFuns.clickShowTime);
        $("#emailCode").on("click", publicFuns.clickShowTime);
        $("#firstPhoneCode").on("click", publicFuns.clickShowTime);

        //验证确定
        var _isRevamp = false;
        $(".login-btn").click(function () {
            var $parent = $(this).parents(".go-transform");
            var _code = $parent.find(".code-text").val();
            var _pwd = $parent.find(".pwd").val();
            var _againPwd = $parent.find(".againPwd").val();
            var _tel = $("#phone");
            if (_tel.parents(".go-transform").hasClass("active")) {
                if (_tel.val().length == 0) {
                    $.jAlert("请输入手机号", 140, 50, "");
                    _isRevamp = false;
                    return false;
                } else {
                    if (!publicFuns.testForm.phone(_tel.val())) {
                        $.jAlert("手机号码格式错误", 140, 50, "");
                        _isRevamp = false;
                        return false;
                    }
                }
            }

            if (_code.length == 0) {
                $.jAlert("请输入验证码", 140, 50, "");
                _isRevamp = false;
                return false;
            } else {
                _isRevamp = true;
            }

            if (publicFuns.testPwd(_pwd)) {
                _isRevamp = true;
            } else {
                _isRevamp = false;
                return false;
            }

            if (_againPwd != _pwd) {
                $.jAlert("两次密码不一致", 140, 50, "");
                _isRevamp = false;
                return false;
            } else {
                _isRevamp = true;
            }

            if (_isRevamp) {
                $.jAlert("设置成功，正在跳转..", 160, 50, "");
            }
        });
    });
</script>
</body>
</html>